import React,{useState} from 'react';
import {MyBreadcrumb} from '@/components/myBreadcrumb/index'
import TableList from "./shoplist";
import styles from './style/index.less'
import { connect } from 'umi'
import { IPro } from './pro';
import { Form, Input, Button, Select } from 'antd';
import { useMount } from 'ahooks';
const { Option } = Select
import { getCategoryListReq, getSearchListReq } from '@/service/prolist'
type ProListProps = {
  proList: Array<IPro>
  dispatch: any
};

const index:React.FC<ProListProps> = (props) => {
  const { proList,dispatch } = props
  const [ categoryList, setCategoryList] = useState([])
  useMount(()=>{
    // console.log(props,123);
    getCategoryListReq().then(res => {
      // console.log(res.data)
      setCategoryList(res.data)
    })
    props.dispatch({
      type:'pro/getProListEffect'
    })
  })
  const [form] = Form.useForm();
  return (
    <>
      <MyBreadcrumb />
      <div className={styles.title}>
      <Form
            layout="inline"
            form={form}
            initialValues={{
              category: '',
              search: ''
            }}
            onFinish = { (values) => {
              console.log(values)
              getSearchListReq(values).then(res => {
                console.log(res)
                dispatch({ // 也可以直接触发 dva数据流的 reducers
                  type: 'pro/UPDATE_PRO_LIST',
                  payload: res.data
                })
              })
            }}
          >
            <Form.Item
              name="category"
            >
              <Select placeholder="请选择分类" style={{ width: 200}}>
                <Option value=''>全部</Option>
                {
                  categoryList.map(item => <Option key={item} value={item}>{item}</Option>)
                }
              </Select>
            </Form.Item>
            <Form.Item name="search">
              <Input placeholder="请输入需要搜索的关键词" />
            </Form.Item>
            <Form.Item>
              {/* htmlType="submit" form表单的onFinish事件中获取到数据*/}
              <Button htmlType="submit" type="primary">搜索</Button>
            </Form.Item>
          </Form>
          <div style={{ height: 20}}></div>
        <TableList dataSource= {proList}></TableList>
      </div>
    </>
  )
}
export default connect(state=>{
  // console.log(state,456);
  return {
    proList: state.pro.proList
  }
})(index);